<template>
  <div class="app-container">
    <el-card>
      <h4>我的下载</h4>
      <el-table :data="myDownList" style="width: 100%">
        <el-table-column prop="fullname" label="基本信息" width="300">
          <template slot-scope="scope">
             <div style="display: flex">
                  <div class="portraitImg">
                    <img
                      :src="
                        scope.row.photoImg === 0
                          ? scope.row.photoImgSrc
                          : 'https://blwcompany.nbblmc.cn' + scope.row.photoImgSrc
                      "
                      alt=""
                    />
                  </div>
                  <div style="margin-left: 10px">
                    <div>
                      <div style="color: #409eff">{{ scope.row.fullname }}</div>
                    </div>
                    <div>
                      {{ scope.row.age }}岁 | {{ scope.row.educationText }} |
                      {{ scope.row.experienceText }}经验 |
                      {{ scope.row.sexText }}
                    </div>
                  </div>
                </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="intentionJobs"
          label="求职意向"
          width="width"
          align="center"
        >
          <template slot-scope="scope">
             <el-tooltip
                  effect="dark"
                  :content="scope.row.intentionJobs"
                  placement="top"
                  :hide-after="0"
                >
                  <div class="ellipsis">
                    想找 <span style="color: #409eff">{{
                      scope.row.intentionJobs
                    }}</span> 工作
                  </div>
                </el-tooltip>
                <el-tooltip
                  effect="dark"
                  :content="scope.row.intentionDistrict"
                  placement="bottom"
                  :hide-after="0"
                >
                  <div class="ellipsis">
                    想在 <span style="color: #409eff">{{
                      scope.row.intentionDistrict
                    }}</span> 工作
                  </div>
                </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="experienceText" label="工作经验">
        </el-table-column>
        <el-table-column prop="prop" label="下载时间" width="width">
          <template slot-scope="scope">
            {{ scope.row.addtime | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="prop" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="notesClick(scope.row)"
              >备注</el-button
            >
            <el-button size="mini" @click="interviewYqClick(scope.row)"
              >面试邀请</el-button
            >
            <!-- <el-button
              type="warning"
              size="mini"
              @click="savaClick(scope.row.resumeId)"
              >保存</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
      <el-row :gutter="10" style="margin-top: 20px" type="flex" justify="end">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="resumeDownloadQuery.page"
          :page-size="resumeDownloadQuery.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
    </el-card>

    <!-- 备注弹框 -->
    <el-dialog
      title="填写备注"
      :visible.sync="notesVisible"
      width="500px"
      custom-class="self-dialog"
    >
      <div class="candidate-info">
        <div class="info-row">简历姓名： {{ notesForm.fullname }}</div>
        <div class="info-row">
          基本信息：{{ notesForm.age }} | {{ notesForm.sexText }} |
          {{ notesForm.educationText }} | {{ notesForm.experienceText }}经验
        </div>
      </div>

      <div class="remark-form">
        <div class="form-label">备注：</div>
        <el-input
          v-model="notesForm.remark"
          type="textarea"
          :rows="4"
          placeholder="请输入备注内容"
          :maxlength="50"
          show-word-limit
        >
        </el-input>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="notesVisible = false">取消</el-button>
        <el-button type="primary" @click="submitRemark">确定</el-button>
      </div>
    </el-dialog>

    <!-- 面试邀请 -->
    <el-dialog
      title="面试邀请"
      :visible.sync="interviewYqVisible"
      width="500px"
      custom-class="interview-dialog"
    >
      <el-form
        :model="InterrviewForm"
        :rules="rules"
        ref="interviewForm"
        label-width="80px"
        class="interview-form"
      >
        <!-- 面试形式 -->
        <el-form-item label="面试形式">
          <el-radio-group v-model="InterrviewForm.type">
            <el-radio :label="1">面试邀请</el-radio>
            <el-radio :label="2" disabled>视频面试</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 面试人 -->
        <el-form-item label="面试人" prop="fullname">
          <span class="candidate-name">{{ fullName }}</span>
        </el-form-item>

        <!-- 面试职位 -->
        <el-form-item label="面试职位" prop="jobid">
          <el-select v-model="InterrviewForm.jobid" placeholder="请选择职位">
            <el-option
              v-for="item in jobList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 面试日期 -->
        <el-form-item label="面试日期" prop="interviewDate">
          <el-date-picker
            v-model="InterrviewForm.interviewDate"
            @change="handleDateChange"
            type="date"
            placeholder="请选择面试日期"
          >
          </el-date-picker>
        </el-form-item>

        <!-- 面试时间 -->
        <el-form-item label="面试时间" prop="interviewTime">
          <el-time-select
            v-model="InterrviewForm.interviewTime"
            @change="handleInterviewTime"
            :picker-options="{
              start: '08:00',
              step: '00:10',
              end: '20:00',
            }"
            placeholder="选择时间"
          >
          </el-time-select>
        </el-form-item>

        <!-- 面试地点 -->
        <el-form-item label="面试地点" prop="address">
          <el-input
            v-model="InterrviewForm.address"
            placeholder="请输入面试地点"
          ></el-input>
        </el-form-item>

        <!-- 联系人 -->
        <el-form-item label="联系人" prop="contact">
          <el-input
            v-model="InterrviewForm.contact"
            placeholder="请输入联系人"
          ></el-input>
        </el-form-item>

        <!-- 联系电话 -->
        <el-form-item label="联系电话" prop="tel">
          <el-input
            v-model="InterrviewForm.tel"
            placeholder="请输入联系电话"
          ></el-input>
        </el-form-item>

        <!-- 备注 -->
        <el-form-item label="备注" prop="note">
          <el-input
            v-model="InterrviewForm.note"
            type="textarea"
            :rows="3"
            placeholder="请填写备注"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="interviewYqVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  downResumeListApi,
  addRemarkApi,
  resumeSaveApi,
  selRemarkByCidAndRidApi,
  updateRemarksApi,
  selCompanyContentListApi,
  addInterviewApi,
} from "@/api/jlManage";
import { positionListApi } from "@/api/position";
export default {
  data() {
    return {
      myDownList: [],
      notesVisible: false,
      interviewYqVisible: false,
      // 新增备注
      notesForm: {
        id: null,
        comid: "",
        resumeId: "",
        remark: "",
        age: "",
        educationText: "",
        experienceText: "",
        fullname: "",
        sexText: "",
      },
      // 新增备注表单提交
      notesFormSubmit: {},
      // 面授邀请表单
      InterrviewForm: {
        address: "",
        contact: "",
        interviewDate: "",
        interviewTime: "",
        jobid: null,
        resumeId: null,
        tel: "",
        type: 1,
      },
      // 职位列表请求参数
      positionQuery: {
        audit: 1,
        page1: 1,
        pageSize: 10,
        uid: "",
      },
      // 联系人列表
      contactsList: {},
      // 简历保存
      resumeSave: {
        rid: "",
        uid: "",
      },
      fullName: "",
      // 链接查询
      linkQuery: {},
      // 职位列表
      jobList: [],
      value: "",
      total: "",
      // 简历下载查询
      resumeDownloadQuery: {
        page: 1,
        pageSize: 10,
        cid: "",
      },
      rules: {
        // address: [
        //   { required: true, message: "请输入面试地点", trigger: "blur" },
        // ],
        contact: [{ required: true, message: "请输入联系人", trigger: "blur" }],
        interviewDate: [
          { required: true, message: "请选择面试日期", trigger: "change" },
        ],
        interviewTime: [
          { required: true, message: "请选择面试时间", trigger: "change" },
        ],
        tel: [
          {
            required: true,
            pattern: /^1[3456789]\d{9}$/,
            message: "请输入正确的电话号码",
            trigger: "blur",
          },
        ],

        jobid: [{ required: true }],
        resumeId: [{ required: true }],
        type: [{ required: true }],
      },
    };
  },
  // watch: {
  //   "InterrviewForm.interviewDate": {
  //     handler(newDate) {
  //       if (newDate && this.InterrviewForm.interviewTime) {
  //         const date = new Date(newDate);
  //         const time = this.InterrviewForm.interviewTime.split(":").map(Number);
  //         date.setHours(time[0], time[1], 0, 0);
  //         console.log(date);
  //         // this.InterrviewForm.interviewTime = date.getTime();
  //       }
  //     },
  //     immediate: true,
  //   },
  // },
  computed: {
    ...mapGetters(["userId", "cid"]),
  },
  created() {
    this.positionQuery.uid = this.userId;
    this.resumeSave.uid = this.userId;
    this.resumeDownloadQuery.cid = this.cid;
    this.positionList();
    this.downResumeList();
    this.selCompanyContentList();
  },
  methods: {
    // 页码改变
    handleSizeChange(pageSize) {
      console.log(pageSize);
      this.resumeDownloadQuery.pageSize = pageSize;
      this.downResumeList();
    },
    // 页码改变
    handleCurrentChange(page) {
      this.resumeDownloadQuery.page = page;
      this.downResumeList();
    },
    // 新增面试邀请
    submitForm() {
      this.$refs.interviewForm.validate(async (valid) => {
        if (valid) {
          // 获取面试日期的时间戳（秒级）
          const interviewDate = new Date(this.InterrviewForm.interviewDate);
          interviewDate.setHours(0, 0, 0, 0); // 将时间部分设置为 00:00:00
          const dateTimestamp = Math.floor(interviewDate.getTime() / 1000);

          // 将选择的时间转换为秒数
          const [hours, minutes] = this.InterrviewForm.interviewTime.split(":");
          const timeSeconds = parseInt(hours) * 3600 + parseInt(minutes) * 60;

          // 创建要提交的数据副本
          const submitData = {
            ...this.InterrviewForm,
            interviewDate: dateTimestamp,
            interviewTime: dateTimestamp + timeSeconds, // 日期时间戳 + 时间秒数
          };

          const res = await addInterviewApi(submitData);
          if (res.code === 1) {
            this.$message.success("保存成功");
            this.interviewYqVisible = false;
            this.$refs.interviewForm.resetFields();
          } else {
            this.$message.error("保存失败");
          }
        }
      });
    },
    // 面试时间状态改变
    handleInterviewTime(value) {
      if (value) {
        // 只需保存时间字符串，不需要转换为时间戳
        this.InterrviewForm.interviewTime = value;
      }
    },
    // 面试日期状态改变
    handleDateChange(value) {
      if (value) {
        // 只保存日期，不需要转换为时间戳
        this.InterrviewForm.interviewDate = value;
      }
    },
    // 职位列表
    async positionList() {
      const res = await positionListApi(this.positionQuery);
      console.log(res);
      this.jobList = res.records.map((item) => {
        return {
          value: item.id,
          name: item.jobname,
        };
      });
      console.log(this.jobList);
    },
    // 列表查询
    async downResumeList() {
      const res = await downResumeListApi(this.resumeDownloadQuery);
      this.myDownList = res.records;
      this.total = res.total;
    },
    // 点击备注
    async notesClick(row) {
      console.log(row);
      const res = await selRemarkByCidAndRidApi({
        cid: this.cid,
        rid: row.resumeId,
      });
      console.log(res);
      if (res.data) {
        this.$set(row, "remark", res.data.remark);
        this.$set(row, "id", res.data.id);
      }
      // row.remark = res.data.remark;
      // row.id = res.data.id;
      console.log(row);
      this.notesForm = row;
      console.log(this.notesForm);
      this.notesVisible = true;
    },
    // 简历保存
    async savaClick(rid) {
      try {
        this.resumeSave.rid = rid;
        const res = await resumeSaveApi(this.resumeSave);
        console.log(res);
        if (res.code === 1) {
          // window.location.href = res.data;
        } else {
          this.$message.error("保存简历失败");
        }
      } catch {
        this.$message.error("保存简历失败");
      }
    },
    // 点击确定
    async submitRemark() {
      try {
        // 使用 id 是否存在来判断是新增还是更新
        if (this.notesForm.id) {
          const res = await updateRemarksApi({
            id: this.notesForm.id,
            remark: this.notesForm.remark || "", // 确保 remark 不为 undefined
          });
          if (res.code === 1) {
            this.$message.success("修改备注成功!");
            this.notesVisible = false;
          } else {
            this.$message.error("修改备注失败");
          }
        } else {
          const res = await addRemarkApi({
            comid: this.cid,
            resumeId: this.notesForm.resumeId,
            remark: this.notesForm.remark || "", // 确保 remark 不为 undefined
          });
          if (res.code === 1) {
            this.$message.success("新增备注成功!");
            this.notesVisible = false;
          } else {
            this.$message.error("新增备注失败");
          }
        }
      } catch {
        this.$message.error("备注失败");
      }
    },
    // 链接保存
    linkClick() {},
    // 面试邀请
    async interviewYqClick(row) {
      console.log(row);
      this.fullName = row.fullname;
      this.interviewYqVisible = true;
      console.log(row.resumeId);
      this.InterrviewForm.resumeId = row.resumeId;
      const res = await selRemarkByCidAndRidApi({
        // cid: 317,
        // rid: 384,
        cid: this.cid,
        rid: row.resumeId,
      });
      console.log(res);
      // this.$set(row, "remark", res.data.remark);
      // this.$set(row, "id", res.data.id);
      // row.remark = res.data.remark;
      // row.id = res.data.id;
      console.log(row);
    },
    // 查询企业联系人列表
    async selCompanyContentList() {
      const res = await selCompanyContentListApi(this.userId);
      this.contactsList = res.data;
      console.log(this.contactsList);
      this.InterrviewForm.tel = res.data.companyMobile;
      this.InterrviewForm.contact = res.data.companyContent;
      this.InterrviewForm.address = res.data.companyAddress;
    },
  },
};
</script>

<style lang="scss" scoped>
.substring {
  display: inline-block;
  max-width: 65%;
  color: #666;
  margin: 0 5px;
}

// .el-dialog__header {
//   text-align: center;
// }

.self-dialog {
  .el-dialog__header {
    // display: none !important;
    background: #f3f3f3;
    text-align: center;
    font-size: 15px;
    color: #333;
  }
}
.info-row {
  margin-bottom: 24px;
  margin-left: 24px;
  font-size: 14px;
}

.remark-form {
  display: flex;
}
.form-label {
  width: 50px;
  margin-left: 24px;
}

.portraitImg {
  img {
    border-radius: 50%;
    width: 52px;
    height: 52px;
  }
}
</style>
